<template>
  <div class="welcome-container">
    <!-- 欢迎横幅 -->
    <div class="welcome-banner">
      <div class="banner-content">
        <div class="welcome-text">
          <h1 class="greeting">{{ greeting }}</h1>
          <p class="subtitle">{{ userInfo.name }}，欢迎使用后台管理系统</p>
          <p class="time">{{ currentTime }}</p>
        </div>
      </div>
    </div>

    <!-- 系统概览卡片 -->
    <div class="overview-section" v-if="false">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item, index) in overviewCards" :key="index">
          <el-card class="overview-card" shadow="hover">
            <div class="card-content">
              <div class="card-icon" :style="{ backgroundColor: item.color }">
                <i :class="item.icon"></i>
              </div>
              <div class="card-info">
                <div class="card-number">{{ item.number }}</div>
                <div class="card-label">{{ item.label }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 快捷入口 -->
    <div class="quick-access-section" v-if="false">
      <h2 class="section-title">快捷入口</h2>
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item, index) in quickAccessItems" :key="index">
          <el-card class="quick-access-card" shadow="hover" @click.native="navigateTo(item.path)">
            <div class="card-content">
              <div class="card-icon" :style="{ backgroundColor: item.color }">
                <i :class="item.icon"></i>
              </div>
              <div class="card-title">{{ item.title }}</div>
              <div class="card-desc">{{ item.description }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Welcome',
  data() {
    return {
      currentTime: '',
      greeting: '',
      userInfo: {},
      overviewCards: [
        { label: '总用户数', number: '1,234', icon: 'el-icon-user', color: '#409EFF' },
        { label: '总订单数', number: '5,678', icon: 'el-icon-s-order', color: '#67C23A' },
        { label: '今日收入', number: '¥12,345', icon: 'el-icon-money', color: '#E6A23C' },
        { label: '库存商品', number: '890', icon: 'el-icon-goods', color: '#F56C6C' }
      ],
      quickAccessItems: [
        { 
          title: '用户管理', 
          description: '管理系统用户信息', 
          icon: 'el-icon-user', 
          color: '#409EFF',
          path: '/system/user'
        },
        { 
          title: '订单管理', 
          description: '查看和处理订单', 
          icon: 'el-icon-s-order', 
          color: '#67C23A',
          path: '/order/list'
        },
        { 
          title: '库存管理', 
          description: '管理商品库存', 
          icon: 'el-icon-goods', 
          color: '#E6A23C',
          path: '/inventory/list'
        },
        { 
          title: '统计分析', 
          description: '查看数据统计', 
          icon: 'el-icon-s-marketing', 
          color: '#F56C6C',
          path: '/statistics/index'
        }
      ]
    }
  },
  created() {
    this.initPage()
    this.startTimer()
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    initPage() {
      const user = localStorage.getItem('user')
      if (user) {
        this.userInfo = JSON.parse(user)
      }
      this.setGreeting()
      this.updateTime()
    },
    
    setGreeting() {
      const hour = new Date().getHours()
      if (hour < 6) {
        this.greeting = '夜深了'
      } else if (hour < 9) {
        this.greeting = '早上好'
      } else if (hour < 12) {
        this.greeting = '上午好'
      } else if (hour < 14) {
        this.greeting = '中午好'
      } else if (hour < 18) {
        this.greeting = '下午好'
      } else if (hour < 22) {
        this.greeting = '晚上好'
      } else {
        this.greeting = '夜深了'
      }
    },
    
    updateTime() {
      const now = new Date()
      this.currentTime = now.toLocaleString('zh-CN')
    },
    
    startTimer() {
      this.timer = setInterval(() => {
        this.updateTime()
      }, 1000)
    },
    
    navigateTo(path) {
      this.$router.push(path)
    }
  }
}
</script>

<style lang="scss" scoped>
.welcome-container {
  padding: 20px;
  background: #f8f9fa;
  min-height: calc(100vh - 60px);
}

.welcome-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 40px;
  margin-bottom: 30px;
  color: white;
  
  .welcome-text {
    .greeting {
      font-size: 36px;
      font-weight: 600;
      margin: 0 0 10px 0;
    }
    
    .subtitle {
      font-size: 18px;
      margin: 0 0 8px 0;
      opacity: 0.9;
    }
    
    .time {
      font-size: 14px;
      margin: 0;
      opacity: 0.8;
    }
  }
}

.overview-section {
  margin-bottom: 30px;
  
  .overview-card {
    .card-content {
      display: flex;
      align-items: center;
      
      .card-icon {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
        
        i {
          font-size: 24px;
          color: white;
        }
      }
      
      .card-info {
        .card-number {
          font-size: 24px;
          font-weight: 600;
          color: #303133;
          margin-bottom: 5px;
        }
        
        .card-label {
          font-size: 14px;
          color: #909399;
        }
      }
    }
  }
}

.quick-access-section {
  .section-title {
    font-size: 20px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 20px;
  }
  
  .quick-access-card {
    cursor: pointer;
    transition: all 0.3s;
    
    &:hover {
      transform: translateY(-5px);
    }
    
    .card-content {
      text-align: center;
      padding: 20px;
      
      .card-icon {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        
        i {
          font-size: 24px;
          color: white;
        }
      }
      
      .card-title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 8px;
      }
      
      .card-desc {
        font-size: 12px;
        color: #909399;
        line-height: 1.4;
      }
    }
  }
}
</style>
